<div class="survey-builder">
    <div class="survey-builder-title">
        Question toolkit
        <span class="survey-builder-close"><i class="fa fa-times"></i></span>
    </div>

    <div class="survey-builder-items">
        <div num="1" class="survey-builder-item draggable-span">
            <div class="survey-builder-item-padding">
                <span><i class="fa fa-ellipsis-v"></i></span>
                Single Choice
            </div>
        </div>
        <div class="popup">
            <div class="popup-content">
                <div class="popup-title">Single Choice</div>
                <span class="popup-close"><i class="fa fa-times"></i></span>
                <div class="popup-desc">Ask your respondent to choose one answer</div>
                <div class="popup-question">
                    <p class="popup-question-title">Which flavor of ice cream is your favorite?</p>
                    <ul class="popup-question-answer">
                        <li>
                            <input id="builder-single-1" type="radio" name="single_choice">
                            <label for="builder-single-1">Chocolate</label>
                        </li>
                        <li>
                            <input id="builder-single-2" type="radio" name="single_choice">
                            <label for="builder-single-2">Vanilla</label>
                        </li>
                        <li>
                            <input id="builder-single-3" type="radio" name="single_choice">
                            <label for="builder-single-3">Strawberry</label>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="survey-builder-items">
        <div num="2" class="survey-builder-item draggable-span">
            <div class="survey-builder-item-padding">
                <span><i class="fa fa-list"></i></span>
                Multiple Choice
            </div>
        </div>
        <div class="popup">
            <div class="popup-content">
                <div class="popup-title">Multiple Choice</div>
                <span class="popup-close"><i class="fa fa-times"></i></span>
                <div class="popup-desc">Ask your respondent to choose one answer</div>
                <div class="popup-question">
                    <p class="popup-question-title">Which flavor of ice cream is your favorite?</p>
                    <ul class="popup-question-answer">
                        <li>
                            <input id="builder-multi-1" type="checkbox">
                            <label for="builder-multi-1">Chocolate</label>
                        </li>
                        <li>
                            <input id="builder-multi-2" type="checkbox">
                            <label for="builder-multi-2">Vanilla</label>
                        </li>
                        <li>
                            <input id="builder-multi-3" type="checkbox">
                            <label for="builder-multi-3">Strawberry</label>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="survey-builder-items">
        <div num="3" class="survey-builder-item draggable-span">
            <div class="survey-builder-item-padding">
                <span><i class="fa fa-table"></i></span>
                Table
            </div>
        </div>
        <div class="popup">
            <div class="popup-content">
                <div class="popup-title">Table</div>
                <span class="popup-close"><i class="fa fa-times"></i></span>
                <div class="popup-desc">Ask your respondent to choose one answer</div>
                <div class="popup-question">
                    <p class="popup-question-title">Which flavor of ice cream is each member of your family's favorite?</p>
                    <table class="table" style="margin-top: 5px">
                        <thead>
                            <tr>
                                <td></td>
                                <td>Chocolate</td>
                                <td>Vanilla</td>
                                <td>Strawberry</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Mother</td>
                                <td><input type="radio"></td>
                                <td><input type="radio"></td>
                                <td><input type="radio"></td>
                            </tr>
                            <tr>
                                <td>Father</td>
                                <td><input type="radio"></td>
                                <td><input type="radio"></td>
                                <td><input type="radio"></td>
                            </tr>
                            <tr>
                                <td>Brother</td>
                                <td><input type="radio"></td>
                                <td><input type="radio"></td>
                                <td><input type="radio"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="survey-builder-items">
        <div num="4" class="survey-builder-item draggable-span">
            <div class="survey-builder-item-padding">
                <span><i class="fa fa-caret-down"></i></span>
                Dropdown
            </div>
        </div>
        <div class="popup">
            <div class="popup-content">
                <div class="popup-title">Dropdown</div>
                <span class="popup-close"><i class="fa fa-times"></i></span>
                <div class="popup-desc">Ask your respondent to choose one answer</div>
                <div class="popup-question">
                    <p class="popup-question-title">Which flavor of ice cream is each member of your family's favorite?</p>
                    <select>
                        <option>Chocolate</option>
                        <option>Vanilla</option>
                        <option>Strawberry</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="survey-builder-items">
        <div num="5" class="survey-builder-item draggable-span">
            <div class="survey-builder-item-padding">
                <span><i class="fa fa-align-justify"></i></span>
                Ranking
            </div>
        </div>
        <div class="popup">
            <div class="popup-content">
                <div class="popup-title">Ranking</div>
                <span class="popup-close"><i class="fa fa-times"></i></span>
                <div class="popup-desc">Ask your respondent to choose one answer</div>
                <div class="popup-question">
                    <p class="popup-question-title">Which flavor of ice cream is each member of your family's favorite?</p>
                </div>
            </div>
        </div>
    </div>

    <div class="survey-builder-items">
        <div num="6" class="survey-builder-item draggable-span">
            <div class="survey-builder-item-padding">
                <span><i class="fa fa-minus"></i></span>
                Single Textbox
            </div>
        </div>
        <div class="popup">
            <div class="popup-content">
                <div class="popup-title">Single Textbox</div>
                <span class="popup-close"><i class="fa fa-times"></i></span>
                <div class="popup-desc">Ask your respondent to choose one answer</div>
                <div class="popup-question">
                    <p class="popup-question-title">Which flavor of ice cream is each member of your family's favorite?</p>
                    <input type="text">
                </div>
            </div>
        </div>
    </div>

    <div class="survey-builder-items">
        <div num="7" class="survey-builder-item draggable-span">
            <div class="survey-builder-item-padding">
                <span><i class="fa fa-tasks"></i></span>
                Multiple Textboxs
            </div>
        </div>
        <div class="popup">
            <div class="popup-content">
                <div class="popup-title">Multiple Textboxs</div>
                <span class="popup-close"><i class="fa fa-times"></i></span>
                <div class="popup-desc">Ask your respondent to choose one answer</div>
                <div class="popup-question">
                    <p class="popup-question-title">What are your three favorite ice cream brands?</p>
                    <table>
                        <tr>
                            <td>Your favorite:</td>
                            <td>
                                <input type="text">
                            </td>
                        </tr>
                        <tr>
                            <td>Second favorite:</td>
                            <td>
                                <input type="text">
                            </td>
                        </tr>
                        <tr>
                            <td>Third favorite:</td>
                            <td>
                                <input type="text">
                            </td>
                        </tr>
                    </table>

                </div>
            </div>
        </div>
    </div>

    <div class="survey-builder-items">
        <div num="8" class="survey-builder-item draggable-span">
            <div class="survey-builder-item-padding">
                <span><i class="fa fa-comments"></i></span>
                Comment Box
            </div>
        </div>
        <div class="popup">
            <div class="popup-content">
                <div class="popup-title">Comment Box</div>
                <span class="popup-close"><i class="fa fa-times"></i></span>
                <div class="popup-desc">Ask your respondent to choose one answer</div>
                <div class="popup-question">
                    <p class="popup-question-title">Which flavor of ice cream is each member of your family's favorite?</p>
                    <textarea></textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="survey-builder-items">
        <div num="9" class="survey-builder-item draggable-span">
            <div class="survey-builder-item-padding">
                <span><i class="fa fa-info"></i></span>
                Contact Information
            </div>
        </div>
        <div class="popup">
            <div class="popup-content">
                <div class="popup-title">Contact Information</div>
                <span class="popup-close"><i class="fa fa-times"></i></span>
                <div class="popup-desc">Ask your respondent to choose one answer</div>
                <div class="popup-question">
                    <p class="popup-question-title">Please enter your mailing address to get updates about ice cream.</p>
                    <table>
                        <tr>
                            <td>Name</td>
                            <td><input type="text"></td>
                        </tr>
                        <tr>
                            <td>Company</td>
                            <td><input type="text"></td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td><input type="text"></td>
                        </tr>
                        <tr>
                            <td>Email</td>
                            <td><input type="text"></td>
                        </tr>
                        <tr>
                            <td>City/Town</td>
                            <td><input type="text"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="survey-builder-items">
        <div num="10" class="survey-builder-item draggable-span">
            <div class="survey-builder-item-padding">
                <span><i class="fa fa-calendar"></i></span>
                DateTime
            </div>
        </div>
        <div class="popup">
            <div class="popup-content">
                <div class="popup-title">DateTime</div>
                <span class="popup-close"><i class="fa fa-times"></i></span>
                <div class="popup-desc">Ask your respondent to choose one answer</div>
                <div class="popup-question">
                    <p class="popup-question-title">Which flavor of ice cream is each member of your family's favorite?</p>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
    $(function(){
        var body = $('body');
        body.on('click', '.tag .search-result li', function(){
            var title = $(this).text();
            var tid = $(this).attr('tid');

            var html = '';
            html += '<div class="tagged-item" tid='+tid+'>';
            html += '<span>'+title+'</span>';
            html += '<span><i class="fa fa-times"></i></span>';
            html += '</div>';
            $(this).parent().parent().parent().find('.tagged').append(html);
            var qid = $(this).parent().parent().parent().parent().attr('qid');

            $.ajax({
                type:"POST",
                url: "<?php echo ROOT_URL; ?>management/addTag",
                dataType: "json",
                data:{'qid': qid, 'tid': tid},
                success:(function(data){

                })
            });
        });

        body.on('click', '.tag .tag-input input', function(){
            $(this).parent().parent().find('.search-result').toggle();
        });

        body.on('click', '.tag .question-tag', function(){
            $(this).parent().find('.survey-tag').toggle();
        });

    });

    //Cấu hình kéo thả sắp xếp câu hỏi
    $('.widget-container-span').sortable({
        connectWith: '.widget-container-span',
        items:'> .widget-box',
        opacity:0.8,
        revert:true,
        forceHelperSize:true,
        placeholder: 'widget-placeholder',
        forcePlaceholderSize:true,
        tolerance:'pointer',
        update: function (event, ui) {
            // turn the dragged item into a "block"
            if(ui.item.hasClass('draggable-span')){
                var num = ui.item.attr('num');
                switch (num){
                    case "1":{
                        $.ajax({
                            type:"POST",
                            url:Root_url+"management/getBuilderChoice",
                            data:{},
                            success:(function(data){
                                ui.item.replaceWith(data);
                                //update question number
                                var widget = $('.widget-box');
                                var size = widget.size();
                                for(var i= 0; i < size; i++){
                                    $(widget.get(i)).find('.col-number').text(i+1);
                                }
                            })
                        });
                        break;
                    }
                    case "2":{
                        $.ajax({
                            type:"POST",
                            url:Root_url+"management/getBuilderMultiChoice",
                            data:{},
                            success:(function(data){
                                ui.item.replaceWith(data);
                                //update question number
                                var widget = $('.widget-box');
                                var size = widget.size();
                                for(var i= 0; i < size; i++){
                                    $(widget.get(i)).find('.col-number').text(i+1);
                                }
                            })
                        });
                        break;
                    }
                    case "3":{
                        $.ajax({
                            type:"POST",
                            url:Root_url+"management/getBuilderTable",
                            data:{},
                            success:(function(data){
                                ui.item.replaceWith(data);
                                //update question number
                                var widget = $('.widget-box');
                                var size = widget.size();
                                for(var i= 0; i < size; i++){
                                    $(widget.get(i)).find('.col-number').text(i+1);
                                }
                            })
                        });
                        break;
                    }
                    default :{
                        break;
                    }
                }
            }else{
                //update question number
                var widget = $('.widget-box');
                var size = widget.size();
                for(var i= 0; i < size; i++){
                    $(widget.get(i)).find('.col-number').text(i+1);
                }
            }
        }
    });

    //Sự kiến kéo thả câu hỏi
    $('.draggable-span').draggable({
        helper: function(e, ui) {
            return $("<div class='drag-message'>Drag and drop</div>").append($(this).find('.draggable').clone());
        },
        connectToSortable:'.widget-container-span',
        stop: function(e, ui) {

        }
    });
    var builder_items = $('.survey-builder-items');
    builder_items.hover(function(){
        $(this).find('.popup').show();
    }, function(){
        $(this).find('.popup').hide();
    });

    builder_items.mousedown(function(){
        $(this).find('.popup').hide();
    });

</script>